$radius: 6upx;
$roundColor: #fc3932;

.stepper {
  display: inline-block;
  background: #fff;
  border-radius: $radius;

  &.disabled {
    .iconfont,
    input {
      color: #999 !important;
    }
  }

  &.round {
    .iconfont {
      border-radius: 50% !important;

      &.reduce {
        color: $roundColor;
        border: 1px solid $roundColor;
        background: #fff !important;
        box-sizing: border-box;
      }

      &.plus {
        color: #fff !important;
        background: $roundColor !important;
      }
    }

    input {
      background: transparent !important;
    }
  }

  .iconfont {
    height: 100%;
    text-align: center;
    background: #f2f3f5;
    color: #555;
    font-size: 26upx;
    float: left;

    &.disabled {
      color: #999;
    }

    &.reduce {
      border-radius: $radius 0 0 $radius;
    }

    &.plus {
      border-radius: 0 $radius $radius 0;
    }
  }

  input {
    height: 100%;
    border: 0;
    background: #f2f3f5;
    text-align: center;
    outline: none;
    border-left: 2upx solid #fff;
    border-right: 2upx solid #fff;
    float: left;
    color: #333;
    font-size: 26upx;
  }
}